<template>
	<view class="xy-user-card flex m-lr-30 p-t-30">
		<view class="l m-r-15">
			<image v-if="user.isLogin" :src="$xyfun.image(user.info.avatar?user.info.avatar:common.appConfig.useravatar)" @tap="onLink" />
			<image v-else :src="$xyfun.image($xyfun.config().useravatar)" />
		</view>
		<view class="c">
			<view v-if="user.isLogin" @tap="$xyfun.to('/pages/user/info')">
				<view class="ts-32 flex lh-32 p-t-25 tb">
						{{user.info.nickname}}
				</view>
				<view class="ts-26 lh-28 m-t-15 tc-w" v-if="role=='distribution'">{{user.distribution.level.name}}</view>
        <view class="ts-26 lh-28 m-t-15 tc-w" v-else>{{user.info.mobile}}</view>
			</view>
			<view v-else @tap="$xyfun.toLogin()">
				<view class="ts-32 lh-32 p-t-20 tb">点击登录</view>
				<view class="ts-26 lh-28 m-t-15 tc-999">点击登录访问更多内容</view>
			</view>
		</view>

	</view>
</template>
<script>
	import { mapState } from 'vuex';
	export default {
		name: "xyUserCard",
		props: {
			role: {
				type: String,
				default: 'user'
			}
		},
		data() {
			return {

				qrcodeModelShow:false
			}
		},
		computed: {
			...mapState(['user'])
		},
		methods:{
			async onLink(){
				if(this.role == 'user'){
					this.$xyfun.to('/pages/user/info');
				}
			}
		}
	}
</script>
<style lang="scss">
	.xy-user-card{
		width: 690rpx;
		.l{
			image{width: 110rpx;height: 110rpx;border-radius: 55rpx;}
		}
		.c{
			width: 300rpx;
		}
		.r{
			position: relative;
			.role{
				position: absolute;bottom: 0;right: 0;
				view{background: linear-gradient(#fc952b,#fbb227);height: 50rpx;line-height: 50rpx;padding: 0;border-radius: 25rpx;width: 150rpx;}

			}

			.coach{
				font-size: 54rpx;line-height: 54rpx;
			}

		}
	}
</style>
